<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择器</title>
        <style>
            #header{
                width:100%;
                height:50px;
                /*边框，背景颜色：查选择器是否选中，效果是否正确*/
                border:1px solid black;
                background-color: #a1a1a1;
            }
            #body{
                width:100%;
                height:900px;
                background-color: aqua;
            }
            #footer{
                width:100%;
                height:200px;
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <!--①元素选择器:以元素名作为选择器，抓取元素
          ②伪类选择器原选择器 上附加效果 ：hover 鼠标悬停
                                      ：before在前添加文本，一般与content属性
                                      ：after 在后添加文本，一般与content羼性
         ③类选择器:以个或多个别名作为选择器，抓取元素【页面微调】
         ④通用选择器:抓取页面上所有元素，规范页面元素【盒模型、字体】
         ⑤id选择器：用在页面结构搭建 【唯一性，切片】
            语法：html 前标记 id="header" 别名
                 css  #header 别名
            id选择器与class选择器区别
            搭建页面结构，根据结构中小范围微调     
        -->
        <div id="header"></div>
        <!-- 作业：网页主体 900px 网页尾巴200px 颜色-->
        <div id="body"></div>
        <div id="footer"></div>
    </body>
</html>